<template>
  <view class="container">
    <!-- 分类导航栏 -->
    <view class="category-bar">
      <scroll-view scroll-x="true" class="category-scroll">
        <view 
          v-for="(subject, index) in subjects" 
          :key="index" 
          class="subject-item"
          :class="{ 'active': selectedSubject === subject.value }"
          @click="filterBySubject(subject.value)"
        >
          <text>{{ subject.label }}</text>
        </view>
      </scroll-view>
    </view>

    <!-- 错题列表 -->
    <view class="mistake-list">
      <view 
        v-for="(item, index) in filteredMistakes" 
        :key="item.id" 
        class="mistake-item"
      >
        <view class="item-header">
          <text class="item-number">第 {{ item.questionIndex }} 题</text>
          <text class="item-subject">{{ item.subject }}</text>
        </view>
        <text class="item-content">{{ item.content }}</text>
        <view class="options-container">
          <view 
            v-for="(option, optIndex) in item.options" 
            :key="optIndex" 
            class="option-item"
            :class="{ 
              'user-wrong': userAnswers[item.id] === optIndex,
              'correct-answer': item.correctAnswer === optIndex 
            }"
          >
            <text class="option-label">{{ getOptionLabel(optIndex) }}.</text>
            <text class="option-text">{{ option.text }}</text>
          </view>
        </view>
        <view class="item-analysis">
          <text class="analysis-title">解析：</text>
          <text class="analysis-content">{{ item.analysis }}</text>
        </view>
        <view class="item-actions">
          <button class="action-btn" @click="rePractice(item)">重新练习</button>
          <button class="action-btn" @click="toggleCollect(item.id)" :class="{ collected: collectedMistakes.includes(item.id) }">
            {{ collectedMistakes.includes(item.id) ? '已收藏' : '收藏' }}
          </button>
        </view>
      </view>
    </view>

    <!-- 无结果提示 -->
    <view v-if="filteredMistakes.length === 0" class="no-result">
      <text>暂无 {{ selectedSubject === 'all' ? '' : subjects.find(s => s.value === selectedSubject)?.label }} 科目错题</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      selectedSubject: 'all', // 当前选中的科目
      subjects: [
        { label: '全部', value: 'all' },
        { label: '宪法', value: 'constitution' },
        { label: '民法', value: 'civil_law' },
        { label: '刑法', value: 'criminal_law' },
        { label: '行政法', value: 'administrative_law' },
        { label: '商经知', value: 'business_law' },
        { label: '理论法', value: 'theoretical_law' },
      ],
      collectedMistakes: [], // 存储用户收藏的错题ID
      // 模拟错题数据（实际项目应从后端或本地存储获取）
      mistakes: [
        {
          id: 1,
          questionIndex: 1,
          content: "根据《中华人民共和国宪法》，中华人民共和国的一切权力属于谁？",
          options: [
            { text: "中国共产党" },
            { text: "人民" },
            { text: "国务院" },
            { text: "全国人民代表大会" }
          ],
          correctAnswer: 1, // 索引，对应 "人民"
          userAnswer: 0, // 用户选了 "中国共产党"
          subject: '宪法',
          analysis: "根据《中华人民共和国宪法》第二条：中华人民共和国的一切权力属于人民。"
        },
        {
          id: 2,
          questionIndex: 5,
          content: "根据《中华人民共和国民法典》，八周岁以上的未成年人为限制民事行为能力人。",
          options: [
            { text: "对" },
            { text: "错" }
          ],
          correctAnswer: 0,
          userAnswer: 1, // 用户选了 "错"
          subject: '民法',
          analysis: "根据《民法典》第十九条：八周岁以上的未成年人为限制民事行为能力人。"
        },
        {
          id: 3,
          questionIndex: 12,
          content: "根据《中华人民共和国刑法》，又聋又哑的人或者盲人犯罪，应当从轻、减轻或者免除处罚。",
          options: [
            { text: "对" },
            { text: "错" }
          ],
          correctAnswer: 1,
          userAnswer: 0, // 用户选了 "对"
          subject: '刑法',
          analysis: "根据《刑法》第十九条：又聋又哑的人或者盲人犯罪，可以从轻、减轻或者免除处罚。注意是'可以'，不是'应当'。"
        },
        {
          id: 4,
          questionIndex: 8,
          content: "根据《中华人民共和国行政许可法》，行政机关应当根据听证笔录，作出行政许可决定。",
          options: [
            { text: "对" },
            { text: "错" }
          ],
          correctAnswer: 0,
          userAnswer: 1, // 用户选了 "错"
          subject: '行政法',
          analysis: "根据《行政许可法》第四十八条：行政机关应当根据听证笔录，作出行政许可决定。"
        },
        {
          id: 5,
          questionIndex: 3,
          content: "根据《中华人民共和国公司法》，有限责任公司股东向股东以外的人转让股权，应当经其他股东过半数同意。",
          options: [
            { text: "对" },
            { text: "错" }
          ],
          correctAnswer: 0,
          userAnswer: 1, // 用户选了 "错"
          subject: '商经知',
          analysis: "根据《公司法》第七十一条：股东向股东以外的人转让股权，应当经其他股东过半数同意。"
        },
      ]
    };
  },
  computed: {
    filteredMistakes() {
      if (this.selectedSubject === 'all') {
        return this.mistakes;
      }
      return this.mistakes.filter(mistake => mistake.subject === this.selectedSubject);
    },
    userAnswers() {
      // 将用户答案数组转换为对象，方便在模板中查找
      const answers = {};
      this.mistakes.forEach(mistake => {
        answers[mistake.id] = mistake.userAnswer;
      });
      return answers;
    }
  },
  methods: {
    filterBySubject(subject) {
      this.selectedSubject = subject;
    },
    getOptionLabel(index) {
      return String.fromCharCode(65 + index); // 0 -> A, 1 -> B, ...
    },
    rePractice(question) {
      // 模拟重新练习，可以跳转到练习页面并传入题目ID
      // 或者在当前页面弹窗显示题目让用户重做
      uni.showModal({
        title: '重新练习',
        content: `是否重新练习第 ${question.questionIndex} 题？`,
        success: (res) => {
          if (res.confirm) {
            console.log('用户选择重新练习', question.id);
            // 这里可以跳转到练习页或弹窗重做
            // uni.navigateTo({ url: `/pages/practice-again/practice-again?id=${question.id}` });
          }
        }
      });
    },
    toggleCollect(id) {
      // 模拟收藏/取消收藏
      if (this.collectedMistakes.includes(id)) {
        this.collectedMistakes = this.collectedMistakes.filter(item => item !== id);
        uni.showToast({ title: '已取消收藏', icon: 'none' });
      } else {
        this.collectedMistakes.push(id);
        uni.showToast({ title: '收藏成功', icon: 'success' });
      }

      // 实际项目中，这里应调用API更新收藏状态
      // uni.request({
      //   url: 'https://your-api.com/toggle-collect',
      //   method: 'POST',
      //    { questionId: id, isCollect: !this.collectedMistakes.includes(id) },
      //   success: (res) => { ... }
      // });
    }
  }
};
</script>

<style scoped>
.container {
  padding: 20rpx;
  background-color: #f8f8f8;
  min-height: 100vh;
}

.category-bar {
  background-color: #fff;
  padding: 20rpx;
  border-radius: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05);
  margin-bottom: 20rpx;
}

.category-scroll {
  white-space: nowrap;
}

.subject-item {
  display: inline-block;
  padding: 10rpx 20rpx;
  margin-right: 20rpx;
  background-color: #f0f0f0;
  border-radius: 30rpx;
  font-size: 26rpx;
  color: #666;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.subject-item.active {
  background-color: #007aff;
  color: white;
}

.mistake-list {
  background-color: #fff;
  border-radius: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05);
  padding: 20rpx 0;
}

.mistake-item {
  padding: 30rpx;
  border-bottom: 1px solid #eee;
}

.mistake-item:last-child {
  border-bottom: none;
}

.item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10rpx;
}

.item-number {
  font-size: 28rpx;
  font-weight: bold;
  color: #007aff;
}

.item-subject {
  font-size: 24rpx;
  color: #007aff;
  background-color: #e3f2fd;
  padding: 4rpx 10rpx;
  border-radius: 10rpx;
}

.item-content {
  font-size: 28rpx;
  color: #333;
  line-height: 1.5;
  margin-bottom: 20rpx;
}

.options-container {
  margin-bottom: 20rpx;
}

.option-item {
  display: flex;
  align-items: center;
  padding: 15rpx;
  border: 1px solid #ddd;
  border-radius: 10rpx;
  margin-bottom: 10rpx;
  background-color: #fafafa;
}

.option-item.user-wrong {
  border-color: #f44336;
  background-color: #ffebee;
}

.option-item.correct-answer {
  border-color: #4caf50;
  background-color: #e8f5e9;
}

.option-label {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  margin-right: 10rpx;
}

.option-text {
  font-size: 26rpx;
  color: #555;
  flex: 1;
}

.item-analysis {
  margin-bottom: 20rpx;
}

.analysis-title {
  font-size: 26rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 5rpx;
}

.analysis-content {
  font-size: 26rpx;
  color: #666;
  line-height: 1.5;
}

.item-actions {
  display: flex;
  justify-content: space-between;
}

.action-btn {
  flex: 1;
  padding: 10rpx 15rpx;
  margin: 0 5rpx;
  border-radius: 10rpx;
  font-size: 24rpx;
  border: 1px solid #007aff;
  color: #007aff;
  background-color: transparent;
}

.action-btn.collected {
  background-color: #007aff;
  color: white;
}

.no-result {
  text-align: center;
  padding: 80rpx 0;
  color: #999;
  font-size: 28rpx;
}
</style>